<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>疯狂的大炮</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="500" style="border: 1px solid #ccc">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>
    <script src="../script/wind/wind-all-0.7.3.js"></script>
    <script>
        const myCanvas = document.getElementById("myCanvas");
        const myCanvasCtx = myCanvas.getContext("2d");
        const cyc = 10;
        const a = 10;
        const img = new Image();
        const balls = [];
        const imgDraw = function () {
            img.src = "../image/dp.jpg";
            img.onload = function () {
                myCanvasCtx.drawImage(img, 0, 415);
            }
        }
        const gerRandomNumber = function (min, max) {
            return (min + Math.floor(Math.random() * (max - min + 1)));
        }
        const randomColor = function () {
            const r = gerRandomNumber(0, 255);
            const g = gerRandomNumber(0, 255);
            const b = gerRandomNumber(0, 255);
            return "rgb("+ r +","+ g +","+ b +")"
        }
        const getBall = function () {
            return  {
                x: 85,
                y: 430,
                r: gerRandomNumber(0, 20),
                vx: gerRandomNumber(190, 3000),
                vy: gerRandomNumber(-3000, 0),
            }
        }

        const fireAsync = eval(Wind.compile("async", function () {
            while (true) {
                balls.push(getBall());
                if (balls.length > 100) {
                    balls.shift();
                }
                myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
                myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
                myCanvasCtx.fillStyle = randomColor();
                myCanvasCtx.beginPath();
                myCanvasCtx.drawImage(img, 0, 415);
                for (var i in balls) {
                    myCanvasCtx.beginPath();
                    myCanvasCtx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    myCanvasCtx.closePath();
                    myCanvasCtx.fill();

                    balls[i].y += balls[i].vy * cyc / 1000;
                    balls[i].x += balls[i].vx * cyc / 1000;
                    if (balls[i].r + balls[i].y >= myCanvas.height) {
                        if (balls[i].vy > 0) {
                            balls[i].vy *= -0.7;
                        }
                    } else {
                        balls[i].vy += a;
                    }
                }
                $await(Wind.Async.sleep(cyc, null));
            }
        }));
        imgDraw();
        window.onload = function () {
            fireAsync().start();
        }

    </script>
</body>
</html>